<template>
    <el-popover trigger="hover" placement="top" class="custom-popover" popper-class="custom-el-popover" :disabled="!!!data">
        <span  slot="reference" >
            <el-tag size="large" >
                <span class="ellipsis " :style="'text-align:'+align" >
                    {{data||'-'}}
                </span>
            </el-tag>
        </span>
        <p class="el-tip">
            {{data}}
        </p>
    </el-popover>
</template>

<script>
export default {
  name: 'cu-popover',
  props: ['data', 'align']
}
</script>

<style scoped lang="less">
.custom-popover{
    width: 100%;
    cursor: pointer;
    /deep/ span{
        width: 100%;
        display: table;
    }
    .el-tag{
        width: 100%;
        color: initial;
        background-color: transparent;
        border-color: transparent;
    }

    .el-tag--large.el-tag{
        font-size: 14px;
    }
}
</style>
<style>
    .custom-el-popover{
        max-width: 600px;
    }
</style>
